<script setup>
	import { computed } from 'vue'
	import { useRouter } from 'vue-router'
	import { useCityStore } from '@/stores/modules/city'

	// 定义props
	const props = defineProps({
		groupData: {
			type: Object,
			default: () => ({}),
		},
	})

	// 动态列表
	const indexList = computed(() => {
		const list = props.groupData.cities.map((item) => item.group)
		list.unshift('#')
		return list
	})

	// 监听城市点击
	const router = useRouter()
	const cityStore = useCityStore()
	const onHotCity = (hot) => {
		// 选中城市
		cityStore.currentCity = hot
		// 返回上一级
		router.back()
	}
</script>

<template>
	<div class="city-group">
		<van-index-bar
			highlight-color="#45cfff"
			:index-list="indexList">
			<!-- 热门 -->
			<van-index-anchor index="#">热门</van-index-anchor>
			<div class="hot">
				<template
					v-for="(hot, index) in groupData.hotCities"
					:key="index">
					<div
						class="hot-item"
						@click="onHotCity(hot)">
						{{ hot.cityName }}
					</div>
				</template>
			</div>
			<!-- 列表 -->
			<template
				v-for="(group, index) in groupData.cities"
				:key="index">
				<van-index-anchor :index="group.group" />
				<template
					v-for="(city, index) in group.cities"
					:key="index">
					<van-cell
						:title="city.cityName"
						@click="onHotCity(hot)" />
				</template>
			</template>
		</van-index-bar>
	</div>
</template>

<style lang="scss" scoped>
	.city-group {
		.hot {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			padding: 10px;
			padding-right: 25px;
			.hot-item {
				width: 70px;
				height: 35px;
				background-color: #dff7ff;
				font-size: 12px;
				border-radius: 17px;
				text-align: center;
				line-height: 35px;
				margin: 6px 5px;
			}
		}
	}
</style>
